<template>
  <div class="content">
    <van-nav-bar title="个人中心" />
    <div class="header-box">
      <van-image
        round
        width="30vw"
        height="30vw"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <div class="header-detail">
        <h2>zjk537</h2>
        <span>ID: 11111</span>
        <span>等级: 普通会员</span>
      </div>
      
    </div>
    
    <van-grid :border="false" :column-num="3" class="summary">
        <van-grid-item>
          <h3>0.00</h3>
          <span>消费金额(元)</span>
        </van-grid-item>
        <van-grid-item>
          <h3>0</h3>
          <span>充值次数</span>
        </van-grid-item>
        <van-grid-item>
          <h3>0.00</h3>
          <span>余额(元)</span>
        </van-grid-item>
      </van-grid>
    <van-cell-group style="margin-top: 4px;">
      <van-cell title="充值订单" is-link value="全部订单" to="/orderList"/>
      <van-cell title="关于我们" is-link to="about"/>
    </van-cell-group>
  </div>
</template>

<style lang="scss" scoped>

  .header-box{
    display: flex;
    padding: 16px;

    .header-detail{
      display: flex;
      flex-direction: column;
      flex: 1;
      margin-left: 16px;
      padding-top: 20px;
      color: #999;
      font-size: 14px;
    }
    h2{color: var(--van-text-color); font-size: 22px;}
  }

  .summary{
    margin-bottom: 4px;
    h3{font-weight: 600;}
    span{color: #aaa;}
  }
</style>
